<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>统一登录</title>
    <link href="/static/assets/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link href="/static/assets/signin.css" rel="stylesheet" crossorigin="anonymous"/>
</head>
<body>
<div class="container m-auto">
    <form class="form-signin" action="" id="loginForm">
        <div class="text-center">
            <img class="mb-4" src="/static/assets/bootstrap-logo.svg" alt="" width="72"
                 height="57">
            <h2 class="h3 mb-3 fw-normal">登录</h2>
        </div>

        <p>
            <label class="inline-flex items-center " onchange="changeLogin()">
                <input type="radio" class="form-radio" name="radioOption" value="A" checked>
                <span class="ml-2">用户密码</span>
            </label>
            <span class="ml-4"></span>
            <label class="inline-flex items-center" onchange="changeLogin()">
                <input type="radio" class="form-radio" name="radioOption" value="B">
                <span class="ml-2">验证码</span>
            </label>
        </p>
        <p>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" name="username" class="form-control" placeholder="Username" value="admin"
                   required
                   autofocus/>
        </p>
        <p>
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="Password" value="123"
                   required/>
        </p>
        <p>
        <div class="row g-3" id="captchaId" hidden>
            <div class="col-md-8">
                <input type="text" value="" placeholder="验证码" class="form-control" id="captchaValue"
                       name="captchaValue"/>
            </div>
            <input type="text" value="" id="captchaKey" name="captchaKey" hidden="true"/>
            <div class="col-md-4">
                <img src="" alt="验证码获取失败！" title="看不清？换一张！" id="codeImg" class="codeImg" height="40"
                     width="" onclick="getCode()"/>
            </div>
        </div>
        </p>
        <p><input type='checkbox' name='remember-me' id="reMe"> 记住我 </p>
        <button class="btn btn-lg btn-primary btn-block" type="button" onclick="submitLogin()">登录</button>

        <p class="mt-5 mb-3 text-muted text-center">&copy; 2022–2025</p>
    </form>
    <div id="loginSuccess" class="form-signin" hidden="true">
        <h2 class="form-signin-heading">已登录</h2>
        <p>
            <input type="text" id="myUserName" name="username" class="form-control" placeholder=""
                   autofocus/>
        </p>
        <button class="btn btn-lg btn-primary btn-block" type="button" onclick="flush()">刷新</button>
        <button class="btn btn-lg btn-primary btn-block" type="button" onclick="logout()">退出</button>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    getCode();
    getUser();
    function changeLogin() {
        var radio = document.getElementsByName("radioOption");
        if (radio[0].checked) {
            document.getElementById("captchaId").hidden = true;
        } else {
            document.getElementById("captchaId").hidden = false;
        }

    }

    function submitLogin() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var captchaKey = document.getElementById("captchaKey").value;
        var captchaValue = document.getElementById("captchaValue").value;
        var rememberMe = document.getElementsByName("remember-me")[0].checked;
        var radio = document.getElementsByName("radioOption");
        var loginUrl = "http://localhost:9081/login";
        if (radio[0].checked) {
            loginUrl = loginUrl + "?username=" + username + "&password=" + password + "&remember-me=" + rememberMe;
        } else {
            loginUrl = loginUrl + "?username=" + username + "&password=" + password + "&captchaKey=" + captchaKey + "&captchaValue=" + captchaValue + "&remember-me=" + rememberMe;
        }
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var obj = JSON.parse(this.responseText);
                if (obj.code == 0) {
                    window.sessionStorage.setItem("token", obj.token)
                    getUser();

                } else {
                    alert(this.responseText)
                }
            }
        };
        xhttp.open("POST", loginUrl, true);
        xhttp.send();
    }

    function getUser() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var obj = JSON.parse(this.responseText);
                if (obj.code != 401) {
                    document.getElementById("loginForm").hidden = true;
                    document.getElementById("loginSuccess").hidden = false;
                    document.getElementById("myUserName").value = "" + obj.username;
                } else {
                    document.getElementById("loginSuccess").hidden = true;
                    document.getElementById("loginForm").hidden = false;
                }
            }
        };

        xhttp.open("GET", "http://localhost:9081/getCurrentUser", true);
        xhttp.setRequestHeader("X-Auth-Token", window.sessionStorage.getItem("token"));
        xhttp.send();

    }

    function flush() {
        getUser();
    }

    function getCode() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var obj = JSON.parse(this.responseText);
                document.getElementById("codeImg").setAttribute("src", obj.base64Img);
                document.getElementById("captchaKey").value = obj.captchaKey;
            }
        };
        xhttp.open("GET", "http://localhost:9081/captchaImage", true);
        xhttp.send();
    }

    function logout() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                getUser();
            }
        };
        xhttp.open("GET", "http://localhost:9081/logout", true);
        xhttp.setRequestHeader("X-Auth-Token", window.sessionStorage.getItem("token"));
        xhttp.send();
    }

</script>